<template>
  <div id="app">
    <!-- 全局加载动画 -->
    <loading-overlay v-if="showLoading" />

    <!-- 主布局（非登录/测试页面） -->
    <template v-if="showMainLayout">
      <el-container class="main-container">
        <!-- 顶部导航栏 -->
        <el-header class="app-header">
          <div class="header-content">
            <span class="app-title">{{ appName }}</span>
            <user-dropdown />
          </div>
        </el-header>

        <el-container>
          <!-- 侧边栏菜单 -->
          <el-aside width="200px" class="app-sidebar">
            <app-menu :active-menu="activeMenu" />
          </el-aside>

          <!-- 主内容区 -->
          <el-main class="app-main">
            <router-view v-slot="{ Component }">
              <transition name="fade" mode="out-in">
                <component :is="Component" />
              </transition>
            </router-view>
          </el-main>
        </el-container>
      </el-container>
    </template>

    <!-- 独立布局（登录/测试页面） -->
    <template v-else>
      <router-view v-slot="{ Component }">
        <component :is="Component" />
      </router-view>
    </template>
  </div>
</template>

<script setup>
import {ref, computed, watch} from 'vue'
import {useRoute} from 'vue-router'
import {useUserStore} from '@/stores/user'
import LoadingOverlay from '@/components/LoadingOverlay.vue'
import UserDropdown from '@/components/UserDropdown.vue'
import AppMenu from '@/components/AppMenu.vue'

const route = useRoute()
const userStore = useUserStore()

const appName = ref('实验室成果管理系统')
const showLoading = ref(false)

// 计算属性：是否显示主布局
const showMainLayout = computed(() => {
  // 这些路由将使用独立布局
  const excludeRoutes = ['/login', '/test-reset-password']
  return !excludeRoutes.includes(route.path)
})

// 计算属性：当前激活菜单
const activeMenu = computed(() => route.path)

// 监听路由变化显示加载状态
watch(() => route.path, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    showLoading.value = true
    setTimeout(() => {
      showLoading.value = false
    }, 300)
  }
})
</script>

<style lang="scss">
@use "@/assets/styles/variables.scss" as *;

#app {
  font-family: $font-family;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--el-text-color-primary);
  height: 100vh;
  overflow: hidden;
}

.main-container {
  height: 100vh;
}

.app-header {
  background-color: $primary-color;
  color: white;
  height: 60px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }

  .app-title {
    font-size: 20px;
    font-weight: bold;
  }
}

.app-sidebar {
  background-color: #545c64;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.app-main {
  padding: 20px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  background-color: #f0f2f5;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>